<template>
    <div class="charge-container">
        <template>
            <el-table :data="vipList" border style="width: 100%">
                <el-table-column align="center" label="产品图片" width="130">
                    <!-- 插槽作用域 -->
                    <template v-slot="{ row }">
                        <el-avatar shape="square" :size="80" fit="scale-down" :src="row.imageUrl"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="productName" align="center" label="产品名称">
                </el-table-column>
                <el-table-column prop="description" align="center" label="产品描述">
                </el-table-column>
                <el-table-column prop="price" align="center" label="价格(元)">
                </el-table-column>
                <el-table-column prop="inventory" align="center" label="库存">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="{ row }">
                        <el-button type="primary" @click="pre_order(row)" icon="iconfont icon-vip3">充值</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>
<script>
import * as api from '@/api/transaction'
export default {
    data() {
        return {
            vipList: [],
        };
    },
    meta: {
        title: "vipCharge",
        icon: "iconfont icon-chongzhi", //存菜单对应的图标的类名
        name: "充值中心"
    },
    created() {
        this.getVipList()
    },
    methods: {
        pre_order(row) {
            //获得当前这一行的product_id 产品id
            console.log(row);
            let { product_id } = row
            // let { product_id } = row.product_id

            // this.$confirm  提示
            this.$confirm("您正在购买" + row.description + "请确认您已经满18岁,并且具备购买能力,是否确定购买?", "购买提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: "success"
            })
                .then(() => {//点了确定
                    //跳转到预支付页面
                    this.$router.push({ path: '/preorder', query: { product_id } })
                    // console.log(123);
                })
                .catch(() => { //点了取消
                    this.$message({
                        type: 'error',
                        message: '已取购买' 
                    });
                })
        },

        getVipList() {
            api.getVipListApi()
                .then(res => {
                    // console.log(res.data)
                    this.vipList = res.data.data;
                })
        }
    },

};
</script>
<style scoped lang="less">
.el-avatar {
    /deep/ img {
        width: 100%;
    }

    height: 30px !important;
    background-color: #fff;
}

.el-button--primary {
    background-color: #05a000;
}
</style>
